<style type="text/css">
		.tabhead{height: 0.9rem;background: #5299d9;position: fixed;top: 0;left: 0;width: 100%;z-index: 999;}
		.tabbox{height: 0.65rem;width: 3.75rem;border:solid 1px #fff;border-radius: 7px;color: #fff;}
		.tabon{background: #fff;color: #5299D9;height: 100%;width: 100%;}
		.tab-left{border-radius: 5px 0 0 5px;}
		.tab-right{border-radius: 0 5px 5px 0;}
		.plan-item{height: 3.98rem;background:#fff;margin: 0.2rem auto;padding-left: 0.3rem;}
		.plan-item-head{height: 0.94rem;}
		.plan-item-logo{height: 0.57rem;width: 0.57rem;border-radius: 50%;margin-right: 0.2rem;}
		.plan-item-logo img{height: 0.57rem;width: 0.57rem;}
		.plan-item-banknama{font-size: 0.32rem;}
		.plan-item-start{color:#76db51;margin-right: .4rem;}
		.plan-item-body{height: 2.32rem;color: #5a5a5a;}
		.plan-money-no{font-size: 0.48rem;color: #000;font-weight: 600;}
		.plan-item-footer{height: 0.7rem;color: #5a5a5a;}
		.zanwulogo{height: 3rem;width: 3rem;font-size: 0.28rem;margin: 3rem auto;text-align: center;color:#999;}
		.zanwulogo img{height: 2.2rem;width: 3rem;margin-bottom: 0.2rem;}
</style>
<div class="container">
	<div class="tabhead flex flex-align-center flex-pack-center">
			<div class="tabbox flex flex-align-center ">
				<div class="tab-left flex flex-align-center flex-pack-center flex-1 tabon">
					<p>进行中</p>
				</div>
				<div class="tab-right flex flex-align-center flex-pack-center flex-1">
					<p>已完成</p>
				</div>
			</div>
	</div>
	<div id="planBox"><!--模板渲染--></div>
	<div style="height: 1.6rem;"></div>
	<!--底部菜单-->
    <div class="footer flex flex-align-center flex-pack-center">
        <div class="cord flex flex-v flex-1">
        	<a href="#cardlist">
			<i class="icon iconfont icon-qia"></i>
			<p>我的信用卡</p>
			</a>
        </div>
		<div class="plan flex flex-v flex-1">
			<a href="#plan" class="active">
			<i class="icon iconfont icon-icon-text-fn-historyrecord" style="font-size: 0.5rem;"></i>
			<p>还款计划</p>
			</a>
	</div>
</div>
<!--渲染模板-->
<script type="text/html" id='template_plan'>
	<div style="height: 0.9rem;"></div>
	<!--进行中-->
	<%for(var i in data){%>
	<div class="plan-item border" data-batchno="<%= data[i].batchNo %>">
			<div class="plan-item-head flex flex-align-center border">
				<div class="plan-item-logo">
					<img src="<%= data[i].bankIcon %>"/>
				</div>
				<div class="plan-item-banknama flex-1"><%= data[i].bankName %>&nbsp;&nbsp;<span style="color: #5a5a5a;">尾号<%= data[i].cardNo %></span></div>
				<%if(data[i].planStatus == 1 || data[i].planStatus == 2){%>
				<div class="plan-item-start flex flex-pack-center flex-align-center">
					<i class="icon iconfont icon-shijian-copy-copy" style="margin-top: 1px; margin-right: 0.05rem;"></i>
					<p>进行中</p>
				</div>
				<%}else if(data[i].planStatus == 3){%>
				<div class="plan-item-start flex flex-pack-center flex-align-center" style="color: #5299d9;">
					<i class="icon iconfont icon-yiwancheng" style="margin-top: 1px; margin-right: 0.05rem;"></i>
					<p>已完成</p>
				</div>
				<%}%>
			</div>
			<div class="plan-item-body border flex flex-v">
				<p class="plan-money-tips">还款金额（含手续费<%= data[i].poundageTotalAmt %>元）</p>
				<p class="plan-money-no"><%= data[i].totalAmount %></p>
				<p class="plan-money-time">还款计划开始时间：<%= data[i].startDate %> | 共<%= data[i].repayTotalCnt %>笔</p>
			</div>
			<div class="plan-item-footer flex flex-align-center flex-pack-center">
				<p class="flex-1">查看详情</p>
				<i class="icon iconfont icon-you" style="margin-right: 0.3rem;"></i>
			</div>
	</div>
	<%}%>
</script>
